<template>
  <div id="app">
  
<transition :name="transitionName" mode="out-in">
   <!-- <keep-alive> -->
       <router-view    class="transitionBody"></router-view>
          <!-- </keep-alive> -->
</transition>
  </div>
</template>
<script>
import Swiper from "swiper";
import "Swiper/dist/css/swiper.css";
export default {
  name: "App",
  data() {
    return {
      transitionName: 'transitionLeft',
      box: [
        { tos: "/zhu", title: "推荐" },
        { tos: "/codle", title: "手机" },
        { tos: "/index", title: "智能" },
        { tos: "/low", title: "电视" },
        { tos: "/lower", title: "笔记本" },
        { tos: "/mis", title: "家电" },
        { tos: "/shou", title: "生活周边" }
      ]
    };
  },
 watch: {
    '$route' (to, from) {
      const arr = ['NewsPage', '/jokePage', '/jokePage', '/myPage']
      const compare = arr.indexOf(to.path) > arr.indexOf(from.path)
      this.transitionName = compare ? 'transitionLeft' : 'transitionRight'
    }
  },
  mounted() {
    var swiper = new Swiper(".swiper-container", {
      slidesPerView: 6,
      spaceBetween: 1,
      freeMode: true,
      pagination: {
        el: ".swiper-pagination",
        clickable: true
      }
    });
    
  },

};
</script>

<style>
body {
 font-family: Helvetica Neue, Tahoma, Arial, PingFangSC-Regular,
    Hiragino Sans GB, Microsoft Yahei, sans-serif;
  font-size: 10px;
  color: #000;
  background:#ffffff;
  margin: 0;
  padding: 0;
}
.swiper-container {
  width: 100%;
  height: 100%;
      background: #f2f2f2;
      padding:0px 0px 12px 0px;
}
.swiper-slide {
  text-align: center;
  font-size: 14px;

  /* background: #fff; */

  /* Center slide text vertically */
}
a {
  text-decoration: none;
  color: #828282;
}

.app-class-a {
  width: 100%;
  height: 50px;
  background: #f2f2f2;
  display: flex;
}
.app-header-item {
  display: block;
  width: 50px;
  /* background:red; */
  margin: 19px 0px 1px 15px;
}
.app-header-item img {
  width: 55%;
}
.app-header-middle {
  flex: 1;
  font-size: 15px;
}
.app-header-title {
  display: flex;

  align-items: center;
  border: 1px solid #e5e5e5;
  text-align: left;
  width: 84%;
  color:black;
  background-color: #fff;
    padding: 9px 4px 4px 4px;
    margin: 6px 0px 0px 0px;
}
.icon-search {
  width: 25px;
  height: 25px;
  /* background:pink; */
  background-image: url();
  background-size: 100% 100%;
}
.app-header-right{
  display: flex;
    align-items: center;
}
.icon-user{
  width:30px;
  height:30px;
  /* background:red; */
      display: block;
      background-image: url();
    background-size: 100% 100%;
}
.poudou-asw-a{
  margin:0px 0px 0px 0px;
}
.router-link-active{
    color:#ff6b00;
}

.slide-left-enter,
.slide-right-leave-active {
    opacity: 0;
   transform: translate(10%, 0);
 }
 
.slide-left-leave-active,
.slide-right-enter {
     opacity: 0;
    transform: translate(-10% 0);
 }


.transitionBody{
 transition: all 0.4s ease-out; /*定义动画的时间和过渡效果*/
}
.transitionLeft-enter,
.transitionRight-leave-active {
  -webkit-transform: translate(100%, 0);
  transform: translate(100%, 0);
   /*当左滑进入右滑进入过渡动画*/
}
.transitionLeft-leave-active,
.transitionRight-enter {
  -webkit-transform: translate(-100%, 0);
  transform: translate(-100%, 0);
}

</style>
